import {Component, Vue, Prop,} from 'vue-property-decorator';
import {TableProps} from "@/components/__utils__/prop";
import {FunctionProp, StringProp} from "@/utils/utils";

const name = 'ViewTable'

@Component({
    name
})
class ViewTable extends Vue implements TableProps {
    @Prop()
    dataSource!: AnyArray;
    @Prop()
    columns!: AnyArray;
    @Prop()
    rowKeyValue!: (record: any) => any | string;
    @Prop()
    scroll!: TableProps['scroll'];
    @Prop()
    columnsOptions!: TableProps['columnsOptions'];
    @Prop()
    customHeaderRow!: TableProps['customHeaderRow'];
    @Prop()
    customRow!: TableProps['customRow'];
    @Prop()
    pagination!: TableProps['pagination'];
    @Prop()
    bordered!: boolean;
    static install: (Vue: any) => void;
    render() {
        const {
            dataSource,
            columns,
            rowKeyValue,
            scroll,
            columnsOptions,
            customHeaderRow,
            customRow,
            pagination,
            bordered
        } = this.$props;
        const {default: slotsColumns} = this.$slots;
        if (!columns || !columns.length) {
            return null;
        }
        if (!rowKeyValue) {
            console.error('rowKey 必须指定');
            return null;
        }
        const tableScroll = scroll || {
            x: '100%',
            y: '100%'
        };
        let tableColumns;
        if (columnsOptions && Object.keys(columnsOptions).length > 0) {
            tableColumns = [...columns].map((column: any) => {
                 Object.keys(columnsOptions).map(k => {
                    column[k] = columnsOptions[k];
                })
                return column;
            })
        }else {
            tableColumns = columns;
        }
        return slotsColumns && slotsColumns.length > 0 ? (
            <a-table
                dataSource={dataSource}
                customHeaderRow={customHeaderRow}
                pagination={pagination}
                customRow={customRow}
                bordered={bordered}
                rowKey={
                    StringProp(rowKeyValue)
                        ?
                        rowKeyValue
                        :
                        FunctionProp(rowKeyValue)
                            ?
                            (record: any) => rowKeyValue(record)
                            :
                            'key'
                }
                scroll={tableScroll}
            >
                {slotsColumns}
            </a-table>
        ) : (
            <a-table
                columns={tableColumns}
                dataSource={dataSource}
                customHeaderRow={customHeaderRow}
                pagination={pagination}
                customRow={customRow}
                bordered={bordered}
                rowKey={
                    StringProp(rowKeyValue)
                        ?
                        rowKeyValue
                        :
                        FunctionProp(rowKeyValue)
                            ?
                            (record: any) => rowKeyValue(record)
                            :
                            'key'
                }
                scroll={tableScroll}
            />
        )
    }
}

ViewTable.install = function(Vue) {
    Vue.component(name, ViewTable)
}

export default ViewTable
